<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./static/css/common.css" />
    <!-- 引入element样式文件 -->
    <link rel="stylesheet" href="./static/element-plus/index.css" />
    <!-- <script src="https://unpkg.com/vue@3"></script> -->
    <script src="./static/js/vue.global.js"></script>
    <!-- 引入element脚本文件 -->
    <script src="./static/element-plus/index.full.js"></script>
    <script src="./static/element-plus/icons-vue.js"></script>
  </head>
  <body>
    <div id="app">
      <el-container>
        <el-header>
          <el-row>
            <el-col :span="4">
              <img src="./static/images/logo.png" />
              <h1>{{title}}</h1>
            </el-col>
            <el-col :span="6" :offset="2">
              <el-menu class="el-menu-d---emo" mode="horizontal" :default-active="activeIndex">
                <el-menu-item index="0">首页</el-menu-item>
                <el-menu-item index="1">文章</el-menu-item>
                <el-menu-item index="2">课程</el-menu-item>
                <el-menu-item index="3">商场</el-menu-item>
              </el-menu>
            </el-col>
            <el-col :span="6" :offset="2">
              <el-input v-model="keywords" placeholder="请输入搜索关键词" />
            </el-col>
            <el-col :span="4">
              <el-link type="primary" underline="never">
                <el-avatar src="./static/images/avatar.png" />
                <p style="padding: 0 20px">{{user.username}}</p>
              </el-link>
            </el-col>
          </el-row>
        </el-header>

        <el-container class="main">
          <el-aside>
            <el-card>
              <el-menu>
                <el-menu-item index="1">
                  <el-icon><House /></el-icon>
                  <span>个人主页</span>
                </el-menu-item>
                <el-menu-item index="2">
                  <el-icon><User /></el-icon>
                  <span>个人资料</span>
                </el-menu-item>
                <el-menu-item index="3">
                  <el-icon><Setting /></el-icon>
                  <span>账号设置</span>
                </el-menu-item>
                <el-menu-item index="4">
                  <el-icon><Bell /></el-icon>
                  <span>消息设置</span>
                </el-menu-item>
                <el-menu-item index="5">
                  <el-icon><Monitor /></el-icon>
                  <span>后台管理</span>
                </el-menu-item>
                <el-menu-item index="6">
                  <el-icon><Collection /></el-icon>
                  <span>退出登录</span>
                </el-menu-item>
              </el-menu>
            </el-card>
          </el-aside>
          <el-main>
            <el-card>
              <el-row>
                <el-col :span="6">
                  <el-avatar :size="100" src="./static/images/avatar.png"></el-avatar>
                </el-col>
                <el-col :span="18">
                  <h2>{{user.username}}</h2>
                  <p>性别：{{user.gender}} | 岗位：{{user.job}}</p>
                  <p>签名档：{{user.bio}}</p>
                </el-col>
              </el-row>
            </el-card>
            <el-card>
              <el-tabs v-model="activeName">
                <el-tab-pane label="我发布的文章" name="1">
                    <div v-if="myArts.length>0">列表数据</div>
                    <el-empty v-else description="暂无数据"></el-empty>
                </el-tab-pane>
                <el-tab-pane label="我收藏的文章" name="2">
                    <div v-if="artList.length>0">列表数据</div>
                    <el-empty v-else description="暂无数据"></el-empty>
                </el-tab-pane>
                <el-tab-pane label="我收藏的课程" name="3">
                    <div v-if="courseList.length>0">列表数据</div>
                    <el-empty v-else description="暂无数据"></el-empty>
                </el-tab-pane>
                <el-tab-pane label="我收藏的商品" name="4">
                    <div v-if="productList.length>0">列表数据</div>
                    <el-empty v-else description="暂无数据"></el-empty>
                </el-tab-pane>
              </el-tabs>
            </el-card>
          </el-main>
        </el-container>

        <el-footer>
          <el-row>
            <el-col :span="8">
              <div><img src="./static/images/logo.png" /></div>
              <div>
                <h1>技术社区</h1>
                <p>致力于构建一个专业的IT技术交流社区</p>
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <el-button type="text">首页</el-button>
                <el-button type="text">文章</el-button>
                <el-button type="text">课程</el-button>
                <el-button type="text">商场</el-button>
              </div>
              <div>
                <el-button type="text">关于我们</el-button>
                <el-button type="text">使用手册</el-button>
                <el-button type="text">隐私条款</el-button>
                <el-button type="text">建议反馈</el-button>
              </div>
            </el-col>
            <el-col :span="8">
              <h2>联系我们</h2>
              <p>电话：123456789</p>
              <p>邮箱：xxx@xxx.com</p>
            </el-col>
          </el-row>
          <el-row><p style="margin: 20px 0">软件开发工作室版权所有</p></el-row>
        </el-footer>
      </el-container>
    </div>

    <script>
      const App = {
        data() {
          return {
            title: "技术社区",
            activeIndex: 0,
            activeName:1,
            keywords: "",
            user: {
              name: "张三",
              username: "admin",
              age: 18,
              gender: "男",
              hobby: "",
              job: "前端开发工程师",
              bio: "<h4>程序员的一天</h4><ul><li>需求分析</li><li>编程开发</li><li>测试部署</li></ul>",
            },
            myArts:[],
            artList:[{
                title:"今天学习条件渲染"
            }],
            courseList:[],
            productList:[],
          };
        },
      };

      const app = Vue.createApp(App).use(ElementPlus);
      for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component);
      }
      app.mount("#app");
    </script>
  </body>
</html>